<template>
  <view class="page-container">
    <!-- 设置列表 -->
    <view class="settings-list">
      <!-- 手机号 -->
      <view class="setting-item" @tap="handlePhoneChange">
        <text class="item-label">手机号</text>
        <view class="item-right">
          <text class="item-value"></text>
          <text class="arrow">></text>
        </view>
      </view>

      <!-- 登陆密码 -->
      <view class="setting-item" @tap="handlePasswordChange">
        <text class="item-label">登陆密码</text>
        <view class="item-right">
          <text class="item-value">未设置</text>
          <text class="arrow">></text>
        </view>
      </view>

      <!-- 微信账号 -->
      <view class="setting-item" @tap="handleWechatAccount">
        <text class="item-label">微信账号</text>
        <view class="item-right">
          <text class="item-value">已绑定</text>
          <text class="arrow">></text>
        </view>
      </view>

      <!-- 注销账号 -->
      <view class="setting-item" @tap="handleDeleteAccount">
        <text class="item-label">注销账号</text>
        <view class="item-right">
          <text class="arrow">></text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      statusBarHeight: 20
    }
  },
  onLoad() {
    this.getStatusBarHeight()
  },
  methods: {
    getStatusBarHeight() {
      const systemInfo = uni.getSystemInfoSync()
      this.statusBarHeight = systemInfo.statusBarHeight
    },
    goBack() {
      uni.navigateBack()
    },
    handlePhoneChange() {
      uni.navigateTo({
        url: '/pages/settings/phone'
      })
    },
    handlePasswordChange() {
      uni.navigateTo({
        url: '/pages/settings/password'
      })
    },
    handleWechatAccount() {
      uni.navigateTo({
        url: '/pages/settings/wechat'
      })
    },
    handleDeleteAccount() {
      uni.showModal({
        title: '提示',
        content: '注销账号后，账号将无法恢复，确定要注销吗？',
        success: (res) => {
          if (res.confirm) {
            this.deleteAccount()
          }
        }
      })
    },
    async deleteAccount() {
      try {
        uni.showLoading({
          title: '处理中...'
        })
        // 实现注销账号的逻辑
        // await this.deleteAccountAPI()
        uni.hideLoading()
        
        // 清除本地存储
        uni.clearStorageSync()
        
        // 返回登录页
        uni.reLaunch({
          url: '/pages/login/login'
        })
      } catch (error) {
        uni.hideLoading()
        uni.showToast({
          title: '操作失败',
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style scoped>
.page-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  font-weight: bold;
  
}



.left {
  padding: 20rpx;
}

.back-icon {
  font-size: 40rpx;
}

.title {
  font-size: 34rpx;
  font-weight: 500;
}

.right {
  display: flex;
  align-items: center;
}

.share-icon,
.more-icon {
  width: 44rpx;
  height: 44rpx;
  margin-left: 30rpx;
}

.settings-list {
  margin-top: 20rpx;
  background-color: #fff;
  border-radius: 30rpx;
}

.setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
  border-bottom: 1rpx solid #f5f5f5;
}

.item-label {
  font-size: 28rpx;
  color: #333;
}

.item-right {
  display: flex;
  align-items: center;
}

.item-value {
  font-size: 28rpx;
  color: #999;
  margin-right: 10rpx;
}

.arrow {
  font-size: 24rpx;
  color: #999;
}

.setting-item:active {
  background-color: #f9f9f9;
}
</style>